<template>
  <div>
    <h1>运用大模型回答问题</h1>
    <IndexPage @on-search="handleSearch"></IndexPage>
    <div v-if="answer" class="answer-container">
      <h2>知识库回答：</h2>
      <p>{{ relatedKnowledge }}</p>
      <h2>AI回答：</h2>
      <p>{{ answer }}</p>
      </div>
  </div>
</template>

<script setup >
import {ref} from "vue";
import IndexPage from './page/index/index.vue';
// const index: Component = IndexPage;
// import IndexPage from './page/index/index.vue'
// const props = defineProps({
//   testCount:{
//     type:Number,
//     default:3
//   }
// })
// const count = ref("");
const answer = ref('');
const relatedKnowledge = ref("");
async function handleSearch (value){
  try {
    const response = await fetch('http://localhost:8000/api/question', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        question: value
      })
    });

    if (!response.ok) {
      throw new Error('请求失败');
    }

    const data = await response.json();
    answer.value = data.generated_answer;
    relatedKnowledge.value = data.related_knowledge;
  } catch (error) {
    console.error('请求出错：', error);
    alert('请求失败，请稍后重试');
  }
  // count.value +=1;
}

</script>

<style>
h1 {
  color: #42b983;
}
</style>